<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>修改密码 - 商场消防云平台</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    /* 复用现有样式，保持一致性 */
    body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .header { background-color: #409EFF; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
    .nav { background-color: #333; overflow: hidden; display: flex; }
    .nav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; }
    .nav a:hover { background-color: #ddd; color: black; }
    .nav a.active { background-color: #f44336; color: white; }
    .container { padding: 20px; max-width: 800px; margin: 0 auto; }
    .input-section { background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius: 8px; padding: 20px; margin-top: 20px; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
    .form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    .btn { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }
    .save-btn { background-color: #409EFF; color: white; }
    .cancel-btn { background-color: #ccc; color: #333; }
    .error-message { color: red; margin-top: 5px; height: 20px; }
  </style>
</head>
<body>
<div class="header">
  <h1>商场消防云平台</h1>
  <div>
    <%-- 从Session获取用户名并显示（如果需要） --%>
    <span id="usernameDisplay">
            <%
              String username = (String) session.getAttribute("username");
              if (username != null) {
                out.print(username);
              } else {
                out.print("未登录");
              }
            %>
        </span>
    <a href="LogoutServlet" style="margin-left: 10px;">退出登录</a>
  </div>
</div>

<div class="nav">
  <a href="main.jsp">首页</a>
  <a href="fire_alarm_list.jsp">火灾报警系统</a>
  <a href="equipment_management.jsp">消防设备管理系统</a>
  <a href="inspection_system.jsp">设备巡检系统</a>
  <a href="video_monitoring.jsp">视频监控系统</a>
  <a href="emergency_plan.jsp">应急预案管理</a>
  <%
    String role = (String) session.getAttribute("role");
    if ("管理人员".equals(role)) {
  %>
  <a href="duty_staff.jsp">检查人员管理</a>
  <a href="system.jsp">系统设置</a>
  <% } %>
  <a href="change_password.jsp" class="active">修改密码</a> <!-- 新增导航项 -->
</div>

<div class="container">
  <h2>修改账号密码</h2>
  <div class="input-section">
    <form id="passwordForm">
      <div class="form-group">
        <label for="oldPassword">旧密码：</label>
        <input type="password" id="oldPassword" required>
        <div class="error-message" id="oldPwdError"></div>
      </div>
      <div class="form-group">
        <label for="newPassword">新密码：</label>
        <input type="password" id="newPassword" required>
        <div class="error-message" id="newPwdError">密码长度至少6位</div>
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认新密码：</label>
        <input type="password" id="confirmPassword" required>
        <div class="error-message" id="confirmPwdError"></div>
      </div>
      <button type="button" class="btn save-btn" onclick="submitChange()">保存修改</button>
      <button type="button" class="btn cancel-btn" onclick="history.back()">取消</button>
    </form>
  </div>
</div>

<script>
  // 表单验证（与之前一致）
  function validateForm() {
    let oldPwd = $("#oldPassword").val().trim();
    let newPwd = $("#newPassword").val().trim();
    let confirmPwd = $("#confirmPassword").val().trim();
    let isValid = true;

    // 旧密码非空验证
    if (oldPwd === "") {
      $("#oldPwdError").text("请输入旧密码");
      isValid = false;
    } else {
      $("#oldPwdError").text("");
    }

    // 新密码长度验证
    if (newPwd.length < 6) {
      $("#newPwdError").text("新密码长度至少6位");
      isValid = false;
    } else {
      $("#newPwdError").text("");
    }

    // 两次密码一致验证
    if (newPwd !== confirmPwd) {
      $("#confirmPwdError").text("两次输入的密码不一致");
      isValid = false;
    } else {
      $("#confirmPwdError").text("");
    }

    return isValid;
  }

  // 提交修改（适配后端返回逻辑）
  function submitChange() {
    if (!validateForm()) return;

    let oldPwd = $("#oldPassword").val().trim();
    let newPwd = $("#newPassword").val().trim();
    let username = "${sessionScope.username}"; // 从Session获取当前用户名

    // 发送AJAX请求
    $.ajax({
      url: "UserServlet",
      method: "POST",
      data: {
        action: "changePassword",
        username: username,
        oldPassword: oldPwd,
        newPassword: newPwd
      },
      dataType: "json",
      success: function(res) {
        if (res.success) {
          alert("密码修改成功，请重新登录");
          window.location.href = "index.jsp"; // 跳转登录页
        } else {
          // 错误提示精准匹配后端返回
          if (res.error === "旧密码错误") {
            $("#oldPwdError").text(res.error);
          } else if (res.error === "参数不完整") {
            alert("参数错误：" + res.error);
          } else if (res.error.startsWith("数据库")) {
            alert("系统错误：" + res.error);
          } else {
            alert("修改失败：" + res.error);
          }
        }
      },
      error: function(xhr, status, error) {
        alert("网络异常，请重试！错误信息：" + error);
      }
    });
  }
</script>
</body>
</html>